@charset"utf-8";
@import"commom/rest";
$border-color: #dbdbdb;
$font-size:20px;
@function r($px) {
    @return $px/ $font-size * 1rem;
}

html,
body {
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    header {
        position: absolute;
        width: 100%;
        background: pink;
        top: 0;
        padding: r(22px) r(17px) r(24px);
        background: #b20000;
        .seach {
            cursor: pointer;
            border: 2px solid white;
            border-radius: 50%;
            width: r(42px);
            height: r(42px);
            text-align: center;
            line-height: r(42px);
            i {
                font-size: r(27px);
                color: white;
                cursor: pointer;
            } 
        }
        .menu {
            i {
                font-size: r(42px);
                color: white;
                 cursor: pointer;
            }
           
        }
        .logo {
            overflow: hidden;
            text-align: center;
            img {
                width: r(264px);
                height: r(39px);
            }
        }
    }
    section {
        width: 100%;
        position: absolute;
        top: r(89px);
        bottom: r(95px);
        -webkit-overflow-scrolling: touch;
        overflow: auto;
        .page_img {
            width: 100%;
            height: r(357px);
            overflow: hidden;
            position: relative;
            font-size: 0;
            img {
                width: 100%;
            }
            .mask {
                padding: r(24px) r(24px) 0 r(30px);
                position: absolute;
                bottom: r(-120px);
                left: 0;
                opacity: 0;
                background: rgba(0, 0, 0, .6);
                bottom: 0;
                height: r(120px);
                width: 100%;
                -webkit-transition: all 0.4s;
                -moz-transition: all 0.4s;
                transition: all 0.4s;
                color: #ffffff;
                h4 {
                    font-size: r(28px);
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
                .mast_box {
                    padding-bottom: r(21px);
                    line-height: r(42px);
                    .mask_left {
                        vertical-align: middle;
                        float: left;
                        i {
                            font-size: r(18px);
                            &:last-of-type {
                                margin-left: r(49px);
                            }
                        }
                        i:hover {
                            color: red;
                        }
                        span {
                            font-size: r(14px);
                        }
                    }
                    .span {
                        vertical-align: middle;
                        float: right;
                        font-size: r(18px);
                    }
                    ul {
                        vertical-align: middle;
                        width: 100%;
                        text-align: center;
                        li {
                            margin-left: r(12px);
                            vertical-align: middle;
                            display: inline-block;
                            width: r(11px);
                            height: r(11px);
                            background: $border-color;
                            border-radius: r(5px);
                        }
                    }
                }
            }
            &:hover {
                .mask {
                    opacity: 1;
                    bottom: 0;
                }
            }
        }
        .news_list {
            padding-left: r(30px);
            padding-right: r(29px);
            li {
                padding-top: r(20px);
                padding-bottom: r(16px);
                &:first-of-type {
                    border-bottom: 1px solid #e2e2e2;
                }
                &::after {
                    content: "";
                    display: block;
                    clear: both;
                }
                .title_warp {
                    width: r(331px);
                    h2 {
                        font-size: r(24px);
                    }
                    .news_info {
                        color: #c5c5c5;
                        margin-top: r(30px);
                        h4 {
                            float: left;
                            font-size: r(14px);
                            img {
                                width: r(19px);
                            }
                        }
                        h5 {
                            float: right;
                            font-size: r(19px);
                        }
                    }
                }
                .img_warp {
                    width: r(208px);
                    img {
                        width: 100%;
                    }
                }
            }
        }
        .hx {
            margin-top: r(17px);
            width: 100%;
            height: r(26px);
            background: #f5f5f5;
        }
        .img_news {
            padding-left: r(30px);
            padding-right: r(29px);
            margin-top: r(34px);
            h2 {
                font-size: r(24px);
                margin-bottom: r(19px);
            }
            li {
                width: 30%;
                display: inline-block;
                img {
                    width: 100%;
                }
                &:nth-of-type(2) {
                    margin-left: r(12px);
                    margin-right: r(10px);
                }
            }
            .thcspan {
                margin-top: r(18px);
                color: #c5c5c5;
                font-size: r(16px);
                line-height: r(20px);
                h4 {
                    float: left;
                    span:nth-of-type(1) {
                        vertical-align: middle;
                        img {
                            width: r(27px);
                            height: r(27px);
                            vertical-align: middle;
                        }
                    }
                    span:nth-of-type(2) {
                        vertical-align: middle;
                        img {
                            vertical-align: middle;
                            width: r(27px);
                            height: r(27px);
                            margin-left: r(18px);
                            margin-right: r(20px);
                        }
                    }
                    span:nth-of-type(3) {
                        vertical-align: middle;
                        img {
                            vertical-align: middle;
                            width: r(27px);
                            height: r(27px);
                        }
                    }
                }
                h5 {
                    vertical-align: middle;
                    float: right;
                    margin-right: r(5px);
                    font-size: r(16px);
                }
            }
        }
    }
    footer {
        width: 100%;
        position: absolute;
        bottom: 0;
        border-top: 1px solid #bbb9ba;
        background: #f5f5f5;
        ul {
            li {
                position: relative;
                float: left;
                width: 20%;
                text-align: center;
                padding-top: r(16px);
                padding-bottom: r(12px);
                &::after {
                    content: "";
                    display: block;
                    border-left: 1px solid #e8e8e8;
                    width: r(1px);
                    height: r(51px);
                    position: absolute;
                    left: 0;
                    top: r(22px);
                }
                i {
                    font-size: r(48px);
                    color: #8b8b8b;
                }
                h2 {
                    font-size: r(17px);
                    color: #8b8b8b;
                    margin-top: r(12px);
                }
                 &[focl] {
                    a {
                        h2,
                        i {
                            color: #B20000 !important;
                        }
                    }
                }
            }
        }
    }
    .page_seach {
        width: 100%;
        height: 100%;
        position: absolute;
        background: white;
        transform: translateX(100%);
        transition: transform 300ms ease-in;
        .seach_kuang {
            width: 100%;
            height: r(87px);
            padding-top: r(19px);
            padding-left: r(12px);
            background: #1e1d1d;
            .suosuok {
                float: left;
                width: r(51px);
                height: r(51px);
                img {
                    width: 100%;
                }
            }
            .seach {
                margin-left: r(26px);
                float: left;
                width: r(532px);
                height: r(52px);
                border: 2px solid #d2d2d2;
                border-radius: r(26px);
                font-size: 0;
                padding-left: r(14px);
                line-height: r(51px);
                i {
                    font-size: r(27px);
                    color: white;
                    vertical-align: middle;
                }
                input {
                    width: 85%;
                    height: r(52px);
                    border-radius: r(26px);
                    line-height: r(51px);
                    margin-left: r(26px);
                    background: none;
                    color: #7e7e7e;
                    border: 0;
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .reso {
            padding-left: r(30px);
            h2 {
                font-size: r(26px);
                margin-top: r(31px);
            }
            ul {
                list-style: none;
                li {
                    display: inline-block;
                    border: 1px solid #8b8b8b;
                    margin: r(12px) r(5px) 0 0;
                    padding: r(3px);
                    a {
                        padding: (6px);
                        height: r(56px);
                        color: #8b8b8b;
                        font-size: r(30px);
                    }
                }
            }
        }
        
    }
    #seach:checked+.page_seach {
        transform: translateX(0);
    }
    .gimc_news{
        width: 100%;
        height: 100%;
        position: absolute;
        background: white;
        transform: translateY(100%);
        transition: transform 300ms ease-in;
        .seach_kuang {
            position: absolute;
            top: 0;
            width: 100%;
            height: r(87px);
            padding-top: r(19px);
            padding-left: r(12px);
            background: #1e1d1d;
            .suosuok {
                float: left;
                width: r(51px);
                height: r(51px);
                img {
                    width: 100%;
                }
            }
            .seach {
                margin-left: r(26px);
                float: left;
                width: r(532px);
                height: r(52px);
                border: 2px solid #d2d2d2;
                border-radius: r(26px);
                font-size: 0;
                padding-left: r(14px);
                line-height: r(51px);
                i {
                    font-size: r(27px);
                    color: white;
                    vertical-align: middle;
                }
                input {
                    width: 85%;
                    height: r(52px);
                    border-radius: r(26px);
                    line-height: r(51px);
                    margin-left: r(26px);
                    background: none;
                    color: #7e7e7e;
                    border: 0;
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .reso {
            padding-left: r(30px);
            h2 {
                font-size: r(26px);
                margin-top: r(31px);
            }
            ul {
                list-style: none;
                li {
                    display: inline-block;
                    border: 1px solid #8b8b8b;
                    margin: r(12px) r(5px) 0 0;
                    padding: r(3px);
                    a {
                        padding: (6px);
                        height: r(56px);
                        color: #8b8b8b;
                        font-size: r(30px);
                    }
                }
            }
        }
       .yiche{
           width: 100%;
           background: #f1f1f1;
           padding-top: r(34px);
           overflow: auto;
           position: absolute;
           top: r(87px);
           bottom:0;
           -webkit-overflow-scrolling: touch;
            .fengkou{
                margin: 0 auto;
                padding-left: r(16px);
                margin-bottom: r(14px);
                width: r(580px);
                height: r(249px);
                background: #ffffff;
                h4{
                    font-size: r(26px);
                    color: #595757;
                    padding-top: r(22px);
                    span{
                        color: red;
                    }
                }
                p{
                    margin-top: r(23px);
                    font-size: r(22px);
                    color: #898989;
                }
                h5{
                    margin-top: r(10px);
                    font-size: r(18px);
                    color: #898989;
                    span{
                        margin-left: r(33px);
                    }
                }
            }
       }
       
       
    }
      #suoso:checked+.gimc_news{
        transform: translateY(0);
    }
    .denglu_warp{
        width: 100%;
        height: 100%;
        position: absolute;
          transform: translateX(-100%);
        transition: transform 300ms ease-in;
        background: #222222;
        .logo{
            width: r(161px);
            height: r(136px);
            margin: 0 auto;
            margin-top:r(193px) ;
            img{
                width: 100%;
            }
        }
        .yonghu{
            font-size: 0;
            line-height: r(53px);
            width: r(492px);
            margin: 0 auto;
            &:first-of-type{
                margin-top: r(47px);
                margin-bottom: r(16px);
            }
            img{
                width: r(61px);
                height: r(53px);
                vertical-align: middle;
            }
            input{
                width: r(431px);
                height: r(53px);
                padding-left: r(39px);
                border: 0;
                background:#3d3d3d;
                font-size: r(20px);
                color: #cdcdcd;
                vertical-align: middle;
            }
        }
        .wangji{
            float:right;
            margin-right: r(82px);
            margin-top: r(26px);
            margin-bottom: r(58px);
            line-height: r(19px);
            a{
                 img{
                width: r(19px);
                height: r(19px);
                line-height: r(19px);
                vertical-align: middle;
            }
            span{
                font-size: r(19px);
                color: #ffffff;
                line-height: r(19px);
                vertical-align: middle;
                margin-left: r(6px);
            } 
            }
          
        }
        .zcdl{
            margin: 0 auto;
            width: r(492px);
            .denglu{
                text-align: center;
                .label{
                    display: inline-block;
                    width: r(492px);
                height: r(53px);
                background: #b60005;
                border: 0;
                border: 0.5px solid #cdcdcd;
                margin-bottom:r(14px) ;
                color: #cdcdcd;
                font-size: r(23px);
                padding-top: r(10px);
                input{
                    display: none;
                } 
                }
            }
              .zhuce{
                 
                 width: r(490px);
                height: r(53px);
                  input{
                width: r(490px);
                height: r(53px);
                background: #303030;
                 border: 0;
                 border:1px solid #b60005;
                color: #cdcdcd;
                font-size: r(23px); 
                -webkit-appearance: none;
                  }
                }
            
        }
        
    }
    #caidan:checked+.denglu_warp{
        transform: translateX(0);
    }
    
    .sosuo_warp {
    background: #222222;
    position: absolute;
    width: 100%;
    height: 100%;
     transform: translateX(-100%);
        transition: transform 300ms ease-in;
    .hea_box{
        padding: 0 r(12px);
           .sosuokuang {
        text-align: center;
        border-bottom: 1px solid #484848;
        line-height: r(52px);
        padding: r(19px) 0 r(16px) 0;
        img {
            width: r(50px);
            height: r(50px);
            vertical-align: middle;
        }
        .seach {
            margin-left: r(20px);
            vertical-align: middle;
            padding-left: r(14px);
            font-size: 0;
            display: inline-block;
            border: 2px solid #FFFFFF;
            border-radius: 24px;
            width: r(520px);
           height: r(60px);
            i {
                font-size: n(27px);
                color: #FFFFFF;
            }
            input {
                width: r(460px);
                height: r(48px);
                color: #FFFFFF;
                background: #1f1f1f;
                border: 0px;
                padding-left: r(15px);
                font-size: r(20px);
            }
        }
    }   
        }
  
    .mide_box {
        
        .sention_mide {
            margin: 0 auto;
            width: r(130px);
            height: r(130px);
            margin-top: r(33px);
            position: relative;
            img {
                width: 100%;
                border-radius: r(65px);
            }
            .shzi {
                background: red;
                width: r(35px);
                height: r(35px);
                text-align: center;
                border-radius: r(16px);
                position: absolute;
                top: 1px;
                left: r(100px);
                color: white;
                line-height: r(30px);
            }
        }
        .gerenzhox{
            margin-top:r(14px) ;
            text-align: center;
             color: #FFFFFF;
            span{
               font-size: r(25px);
            }
            a{
                width: r(94px);
                height: r(24px);
                font-size: r(15px);
                color: #FFFFFF;
                border: 1px solid #FFFFFF;
                padding: 0 n(11px);
            }
        }
        .xinxin{
            text-align: center;
            margin-top: r(8px);
            margin-bottom: r(12px);
            img{
                width: r(22px);
                height: r(20px);
            }
        }
        .inp{
            text-align: center;
            a{
                display: inline-block;
                width: r(219px);
                height: r(52px);
                border-radius:r(26px) ;
                color:#FFFFFF; 
                line-height:r(52px); 
                font-size:r(20px); 
                &:first-of-type{
                    background: red;
                }
                &:last-of-type{
                background: #cdcdcd;
                }
            }
        }
        
        
        
    }
    .hx{
          width: 100%;
        height: r(24px);
        background: #cdcdcd;
        margin-top:r(18px) ;
    }
    .xialakuang{
        color: #7f7f7f;
        padding: 0 r(34px);
        margin-top: r(53px);
        .xiala{
            margin-bottom:r(36px);
            &:last-of-type{
                border: 0px;
            }
            .heng{
                border-bottom: 1px solid #7f7f7f ;
                padding-bottom: r(22px);
            }
            border-bottom:1px solid #7f7f7f ;
            padding-bottom: r(20px);
            height: r(41px);
            overflow: hidden;
            transition: height 0.5s;
            span{
                float: right;
               -webkit-transform: rotate(0deg);
            }
            p{
                margin: 0 auto;
                text-align: center;
                width: r(436px);
                border-bottom:1px solid #7f7f7f;
                padding-bottom:r(30px) ;
                &:first-of-type{
                    margin-top: r(50px);
                }
                &:last-of-type{
                    border-bottom: 0px;
                    margin-top:r(34px) ;
                    padding-bottom:r(30px) ;
                }
                
            }
            &:hover{
                height: r(304px);
                .heng span{
                    -webkit-transform: rotate(90deg);
                }
                
            }
           
            
            
            
        }
    }
    .anniu{
        text-align: center;
        a{
            display: inline-block;
            line-height: r(52px);
            width: r(180px);
            height: r(52px);
            background: red;
            color: #FFFFFF;
            border-radius: r(26px);
        }
    }
}

    #denlu:checked+.sosuo_warp{
        transform: translateX(0);
    }
    //web
}